<template>
  <div>
    <mm-header></mm-header>
    <div class="brandList-container">
      <div class="container-title">
        <router-link to="/">首页</router-link>
        >
        <router-link to="/brandTitle">全部分类</router-link>
        >
        <a href="#">{{listTitle}}</a>
        >
        <button class="fr mui-btn-xs">筛选</button>
      </div>
      <div class="hotNav">
        <h3>{{listTitle}}</h3>
        <ul class="mui-table-view">
          <li class="mui-table-view-cell" v-for="item in list" :key="item.brandId">
              <router-link :to="'/brandSonSonList/brandtitleid='+item.brandTitleId+'&brandName='+item.brandName" tag="a" class="mui-navigate-right">
                <div class="border fl">
                  {{item.brandId - (item.brandTitleId * 10) +1}}
                </div>
                <div class="border-right fl">
                  {{item.brandName}}

                  <p>{{item.brandInfo}}</p>
                </div>
              
              </router-link >
          </li>
        </ul>
      </div>
    </div>
    <mm-footer></mm-footer>
  </div>
</template>
<script>
import mmHeader from "../publicComponents/mmHeader.vue";
import mmFooter from "../publicComponents/mmFooter.vue";
export default {
  data() {
    return {
      list: [],
      listTitle: ''
    }
  },
  created() {
    this.getList()
    this.getListTitle()
  },
  methods: {
    getList() {
      var id = this.$route.params.id
      this.$http.get('api/getbrand?'+id).then((res) => {
        this.list = res.body.result
        console.log(this.list)
      })
    },
    getListTitle() {
      // console.log(this.$route.params)
      var num = this.$route.params.id.lastIndexOf('=')
      this.listTitle = this.$route.params.id.slice(num+1)
      this.$store.commit('addBrandTitle',this.listTitle)
      console.log(this.$store.state.brandTitle)
    }
  },
  components: {
    mmHeader,
    mmFooter
  }
};
</script>
<style lang="less" scoped>
  @import '../../less/var';
  .brandList-container {
    position: relative;
    .container-title {
      padding-left: 25/@base;
      height: 76/@base;
      line-height: 76/@base;
      color: #000;
      font-size: 26/@base;
      background-color: #f5f5f5;
      a {
        color: #000;
        // text-decoration: underline;
      }
      .mui-btn, button, input[type=button], input[type=reset], input[type=submit] {
        padding: 8/@base 28/@base;
        font-size: 26/@base;
        margin-top: 8/@base;
        color: #000;
        background-color: #ccc;
      }
    }
    .hotNav {
      h3 {
        font-size: 26/@base;
        line-height: 1.5;
        padding-left: 20/@base;
        text-align: left;
        font-weight: 400;
        margin: 20/@base 0;
      }
      .mui-navigate-right {
        font-size: 24/@base;
        .border {
          border: 1px solid #ccc;
          // padding: 4/@base 20/@base;
          width: 60/@base;
          height: 60/@base;
          text-align: center;
          line-height: 60/@base;
          color: #fff;
          background-color: #ccc;
        }
        .border-right {
          margin-left: 20/@base;
        }
        p {
          font-size: 20/@base;
        }
      }
      ul.mui-table-view {
        li:nth-child(1) {
          .border {
            background-color: #f10e0e;
          }
        }
        li:nth-child(2) {
          .border {
            background-color: #ff9315;
          }
        }
        li:nth-child(3) {
          .border {
            background-color: #8adf5b;
          }
        }
      }
    }
  }
</style>
